﻿@page "/Label"
@inherits MasaComponentBase

<PageTitle>@T("LabelManagement")</PageTitle>

<MRow NoGutters>
    <SSearch @bind-Value="_typeName" OnEnter="SearchAsync" Height="40" Dense BackgroundColor="#fff" MaxWidth="0" />
    <SButton Height="40" Width="100" BorderRadiusClass="rounded-lg" Class="ml-6" OnClick="()=>ShowLabelModal(null)">
        <SIcon Class="mr-1" Small IsDefaultToolTip="false">mdi-plus</SIcon>@T("Add")
    </SButton>
</MRow>

<MRow NoGutters Class="mt-6 label-cards" Style="position: relative;">
    @if (_labels.Any())
    {
        foreach (var labelGroup in _labels.GroupBy(l => l.TypeCode))
        {
            var label = labelGroup.FirstOrDefault() ?? new();
            <MCol Cols="4">
                <MCard Class="mb-6" Outlined MinHeight="242" Style="border-radius:16px !important; border: none;">
                    <MCardTitle Style="font-size: medium; flex-wrap:nowrap; padding-bottom: 12px !important;">
                        <div class="emphasis2--text h7 text-overflow"><span class="font-weight-bold">@label.TypeName</span></div>
                        <MSpacer />
                        <SButton Icon OnClick="()=>ShowLabelModal(label)">
                            <SIcon Size="20" Color="#323D6F">mdi-pencil</SIcon>
                        </SButton>
                    </MCardTitle>
                    <MCardSubtitle>
                        <div class="text-overflow regular2--text">@label.TypeCode</div>
                        <div class="mt-4" style="display:-webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;text-overflow: ellipsis;overflow: hidden; color: #485585">
                            @label.Description
                        </div>
                    </MCardSubtitle>
                    <div style="position:absolute;bottom:0;left:0;right:0; padding:0 16px 16px 16px !important;">
                        <MChipGroup Class="env-cluster-chip-group">
                            @foreach (var item in labelGroup)
                            {
                                <MChip Color="#F0F3FA" Style="color: #323D6F; font-size: 14px;" Class="mr-3 font-weight-regular" Small>
                                    @item.Name
                                </MChip>
                            }
                        </MChipGroup>
                        <div class="mx-2 d-flex justify-end regular3--text btn text-overflow" style="margin:16px 0 0 0;">
                            <span style="font-size: 12px; color: #A3AED0;">@T("Edit in") @label.ModificationTime.Humanize(utcDate: true, culture:I18n.Culture)</span>
                            <span class="mx-2" style="color:#E2E7F4">|</span>
                            <span style="font-size: 12px; color: #323D6F;">@label.ModifierName</span>
                        </div>
                    </div>
                </MCard>
            </MCol>
        }
    }
    else if(!_showProcess)
    {
        <SEmptyPlaceholder Height="calc(100vh - 190px);" /> 
    }
    <MOverlay Class="rounded-4" Value="_showProcess" Absolute Color="#fff" Opacity="1.0" Style="height:calc(100vh - 190px);">
        <MProgressCircular Width="4" Indeterminate Size="48" Color="primary"></MProgressCircular>
    </MOverlay>
</MRow>

<SSheetDialog EnableDomReload Value="_labelModal.Visible" ValueChanged="LabelModalValueChanged" Title="@_labelDialogTitle" Icon="mdi-circle" IconColor="success">
    <MForm Class="full-height" Context="formContext" EnableValidation Model="_labelModal.Data">
        <div class="d-flex flex-column" style="width:100%; height:100%; padding:  48px 228px; overflow: hidden;">
            <div class="full-height" style="overflow-y: auto;">
                <p style="font-size:14px; font-weight:700; color:#1B2559">@T("Label")</p>
                <MRow NoGutters>
                    <MCol>
                        <STextField Outlined @bind-Value="_labelModal.Data.TypeName" Label="TypeName" class="mr-6"></STextField>
                    </MCol>
                    <MCol>
                        <STextField Disabled="_labelModal.HasValue" Outlined @bind-Value="_labelModal.Data.TypeCode" Label="TypeCode"></STextField>
                    </MCol>
                </MRow>
                <p class="mt-12" style="font-size:14px; font-weight:700; color:#1B2559">@T("Label values")</p>
                <div style="border-radius: 8px; border: 1px solid #E2E7F4;" class="pt-3 pb-4">
                    <MRow Style="color: #A3AED0; font-size: 14px;" Class="px-6" NoGutters>
                        <span style="width: 47.5%">Name</span>
                        <span style="width: 47.5%">Code</span>
                        <span class="d-flex justify-center" style="width: 5%">@T("Operation")</span>
                    </MRow>
                    <MDivider Class="mt-3"></MDivider>
                    @foreach (var item in _labelModal.Data.LabelValues)
                    {
                        <MRow Class="pt-4 px-4" NoGutters Justify="JustifyTypes.SpaceBetween">
                            <STextField Style="width: 46.5%" Class="pr-6" TextColor="regular" Outlined @bind-Value="item.Name" Label="Name"></STextField>
                            <STextField Style="width: 46.5%;" TextColor="@(item.Disabled ? "" : "regular")" Disabled="@(_labelModal.HasValue && item.Disabled)" Outlined @bind-Value="item.Code" Label="Code"></STextField>
                            <div class="d-flex justify-end align-start ml-6 pt-2" style="width: 5%;">
                                <SButton Icon Class="mr-1">
                                    <SIcon Color="#323D6F" Disabled="@(_labelModal.Data.LabelValues.Count==1)" OnClick="()=>RemoveLabelValue(item.Index)" Class="remove-bg-after" Tooltip="@T("Remove")">mdi-close</SIcon>
                                </SButton>
                                <SButton Icon>
                                    <SIcon Color="#323D6F" OnClick="()=>AddLabelValue(item.Index)" Class="remove-bg-after">mdi-plus</SIcon>
                                </SButton>
                            </div>
                        </MRow>
                    }
                </div>
                <MTextarea Class="mt-12" Outlined Label="@T("Description")" @bind-Value="_labelModal.Data.Description"></MTextarea>
            </div>
            <div class="d-flex" style="width:100%;">
                @if (_labelModal.HasValue)
                {
                    <SButton Text Color="error" Small OnClick="()=>RemoveLabelAsync(_labelModal.Data)">@T("Delete")</SButton>
                }
                <MSpacer />
                <SButton Small OnClick="()=>SubmitLabelAsync(formContext)">@(_labelModal.HasValue ? T("Save") : T("Submit"))</SButton>
            </div>
        </div>
    </MForm>
</SSheetDialog>